<template>
  <div class="RecordVisit">
    <van-nav-bar title="记录就诊" left-arrow @click-left="$router.push('/medicalHistory')"/>
    <!--    选择药物-->
    <van-field @click="$router.push('/chooseDrug')"
               v-model="drugNameList.drugName"
               label="选择药物"
               placeholder="请选择>"
               input-align="right"/>
    <!--    就诊医院-->
    <van-field v-model="hospitalName"
               label="就诊医院"
               placeholder="请输入就诊医院"
               input-align="right"/>
    <!--    就诊医生-->
    <van-field v-model="doctorName"
               label="就诊医生"
               placeholder="请输入就诊医生"
               input-align="right"/>
    <!--    就诊时间-->
    <van-field readonly
               clickable
               name="calendar"
               :value="seeDoctorTime"
               label="就诊时间"
               placeholder="请选择 >"
               @click="showSeeDoctorTime = true"
               input-align="right"/>
    <van-calendar v-model="showSeeDoctorTime"
                  :min-date="minDate"
                  @confirm="confirmSeeTimeBtn"/>
    <div class="footer">
      <div><span>拍照上传</span>
        <van-uploader v-model="fileList" multiple/>
      </div>
      <van-field
          v-model="describle"
          rows="3"
          autosize
          label="文字记录"
          type="textarea"
          maxlength="500"
          placeholder="请输入内容"
          show-word-limit
      />
    </div>
    <div class="saveBtn">
      <van-button type="info" size="small" @click="saveBtn">保存</van-button>
    </div>
  </div>
</template>

<script>
import {Collapse, Toast} from 'vant';
import {areaList} from "@vant/area-data";

export default {
  name: "RecordVisit",
  mounted() {
    this.drugNameList = this.$route.query.result[0];
    console.log(this.drugNameList);
  },
  data() {
    return {
      describle: '',
      fileList: [],
      drugNameList: '',//选择药物名称
      showSeeDoctorTime: false,//就诊时间
      areaList, // 地址
      hospitalName: '',//就诊医院
      doctorName: '',//就诊医生
      seeDoctorTime: '',//就诊时间
      minDate: new Date(1930, 0, 1),
    };
  },

  methods: {
    //保存
    saveBtn() {
      Toast.success('保存成功');
      this.$router.push('/medicalHistory')
    },
    //就诊时间
    confirmSeeTimeBtn(date) {
      this.seeDoctorTime = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
      this.showSeeDoctorTime = false;
    },
  },
}

</script>

<style lang='less' scoped>

.RecordVisit {
  background-color: white;

  .footer {
    div {
      display: flex;
      flex-direction: column;
      padding: 15px;

      span {
        margin-bottom: 10px;
        font-size: 14px;
      }
    }
  }

  .saveBtn {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }
}
</style>
